/* eslint-disable */
<template>
  <div class="passenger-select2">
    <el-form ref="form" :model="form" label-width="88px" size="samll">
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="serachForm.gengerateTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          :picker-options="pickerOptions"
          @change="onPick"
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "dateselect",
  props:["querydate"],
  data() {
    return {
      form: {},
      value: "",
      serachForm: {
        gengerateTime: []
      },
      date: {
        startTime: "2020-07-17",
        endTime: "2020-07-17"
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    this.serachForm.gengerateTime = this.querydate; 
      this.dtfn();
    //  let date = 0;
    // date = this.getDay(0);
    // this.date.startTime = date;
    // this.date.endTime = date;
  },
  monted() {
   
  },
  watch: {
    querydate() {
      // console.log(this.querydate)
       this.serachForm.gengerateTime = this.querydate;
   
    }
  },
  methods: {
    dateFormat(time) {
      let date = new Date(time);
      let year = date.getFullYear();

      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

      return year + "-" + month + "-" + day;
    },

    getDay(day) {
      let today = new Date();
      let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      let tYear = today.getFullYear();
      let tMonth = today.getMonth();
      let tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },

    doHandleMonth(month) {
      let m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },

    onPick(val) {
      // console.log(val)
      // console.log(this.value)
      // console.log(this.dateFormat(val[0]))
      // console.log(this.dateFormat(val[1]))
      this.date.startTime = this.dateFormat(val[0]);
      this.date.endTime = this.dateFormat(val[1]);
      this.dtfn();
    },
    dtfn() {
      this.$emit("listenEvent", this.date);
    }
  }
};
</script>

<style lang="scss" scoped>
.passenger-select2 {
  margin-top: 8px;
}
.passenger-select2 ::v-deep .el-radio-button {
  margin-right: 15px;
}
::v-deep .el-radio-button--mini .el-radio-button__inner {
  font-size: 13px;
  font-weight: 400;
}
::v-deep .el-radio-button__inner {
  color: #000;
}
.el-form-item{
margin-bottom: 7px;
}
::v-deep .el-date-editor .el-range-separator{
  width: 6%;
}
::v-deep .el-input__inner {
  height: 34px;
  line-height: 34px;
}
::v-deep .el-date-editor .el-range__icon{
  line-height: 26px;
}
::v-deep .el-date-editor .el-range-separator{
  line-height: 26px;
}
</style>